<template>
  <div class="repaymentDetail">
    <van-nav-bar title="明细查询"/>
    <div class="repaydetailInfo">
      <div class="topbox">
        <van-cell class="box" size="large" is-link >
          <template #title>
            <p class="cellTitle">信用卡</p>
          </template>
          <template #default>
            <p class="cellInfo">腾讯白金卡(1102)</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large" is-link>
          <template #title>
            <p class="cellTitle">币种</p>
          </template>
          <template #default>
            <p class="cellInfo">人民币</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">时间选择</p>
          </template>
          <template #default>
            <p class="cellInfo timeLeft">{{firstTime +'至'+ lastTime}}</p>
            <!-- <img class="cellIcon" src="./img/日历.png" alt="" /> -->
          </template>
          <template #extra>
            <!-- <p class="cellInfo timeLeft">{{startTime +'至'+ endTime}}</p> -->
            <img @click="showDate = true" class="cellIcon" src="./img/日历.png" alt />
          </template>
        </van-cell>
      </div>
      <div class="mainbox">
        <van-cell class="box newBox" size="large" is-link @click="jumpUrl()">
          <template #title>
            <p class="cellTitle">网银转入</p>
            <p class="cellsubTitle">2024-12-22 03:01:20</p>
          </template>
          <template #default>
            <p class="cellInfo listInfo">3.89元</p>
          </template>
        </van-cell>
      </div>
    </div>
    <van-popup v-model:show="showDate" v-model:close="showDate" position="bottom" class="myPopup">
      <van-row class="rowBox" gutter="20">
        <van-col class="colBtn firstBtn" span="8" @click="showDate = false">取消</van-col>
        <van-col class="colBtn secondBtn" span="8">日期区间</van-col>
        <van-col class="colBtn lastColbtn" span="8" @click="submit">确定</van-col>
      </van-row>
      <van-tabs class="vanTabs" :active="active" bind:change="onChange" color="#fff">
        <van-tab>
          <template #title>
            <p class="supTitle">起始日期</p>
            <p class="supTips">{{startTimeCheck}}</p>
          </template>
          <div class="datePicker">
            <van-datetime-picker
              type="date"
              v-model="currentDate"
              :min-date="minDate"
              :max-date="maxDate"
              :show-toolbar="false"
              @input="confirm"
              :formatter="formatter"
            />
          </div>
        </van-tab>
        <van-tab>
          <template #title>
            <p class="supTitle">结束日期</p>
            <p class="supTips">{{endTimeCheck}}</p>
          </template>
          <div class="datePicker">
            <van-datetime-picker
              type="date"
              v-model="currentDate2"
              :min-date="minDate2"
              :max-date="maxDate2"
              :show-toolbar="false"
              @input="confirm2"
              :formatter="formatter"
            />
          </div>
        </van-tab>
      </van-tabs>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "repaymentDetail",
  components: {},
  data() {
    return {
      active: 0,
      firstTime: "2024-03-13",
      lastTime: "2024-03-12",
      startTime: "",
      startTimeCheck: "",
      endTimeCheck: "",
      endTime: "",
      showDate: false,
      minDate: new Date(1900, 0, 1),
      currentDate: new Date(),
      maxDate: new Date(),
      minDate2: new Date(1900, 0, 1),
      currentDate2: new Date(),
      maxDate2: new Date()
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    onChange() {},
    confirm() {
      let val = this.currentDate;
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.startTime = `${year}-${month}-${day}`;
      this.startTimeCheck = `${year}年${month}月${day}日`;
    },
    confirm2() {
      let val = this.currentDate;
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.endTime = `${year}-${month}-${day}`;
      this.endTimeCheck = `${year}年${month}月${day}日`;
    },
    submit() {
      this.firstTime = this.startTime;
      this.lastTime = this.endTime;
      this.showDate = false;
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      } else if (type === "second") {
        return `${value}秒`;
      }
      return value;
    },
    jumpUrl() {
      this.$router.push("/tradeDetail");
    }
  }
};
</script>

<style lang='less' scoped>
/deep/ .van-icon {
  color: #676565;
}
/deep/.van-nav-bar__title {
  color: #676565;
}
.repaydetailInfo {
  background-color: #5756560d;
  min-height: 100vh;
  padding: 0.1rem 0.16rem 0;
}
.topbox {
  background-color: #fff;
  border-radius: 0.05rem;
  p {
    margin: 0;
  }
}
.mainbox {
  p {
    margin: 0;
  }
  .cellInfo {
    color: #676565;
    text-align: right;
  }
  .cellsubTitle {
    color: #ccc;
    font-size: 12px;
  }
  .listInfo {
    line-height: 48px;
  }
  .newBox {
    .van-icon {
      line-height: 48px;
    }
  }
  .van-cell__title {
    min-width: 50%;
    text-align: left;
  }
  .van-cell__value {
    min-width: 45%;
  }
}
.mainbox {
  margin-top: 0.1rem;
}
.cellTitle {
  color: #676565;
}
.cellInfo {
  color: #676565;
  text-align: left;
}
.van-cell__title {
  min-width: 30%;
  text-align: left;
}
.van-cell__value {
  min-width: 60%;
}
.van-tab__text--ellipsis {
  overflow: none;
}
.cellIcon {
  width: 0.2rem;
}
.myPopup {
  height: 40%;
}
.supTitle {
  font-size: 14px;
  margin-bottom: 0.05rem;
  text-overflow: unset;
  text-align: center;
  font-weight: 700;
}
/deep/.van-tab--active {
  background-color: #fff;
  .supTips {
    color: orange;
  }
}
/deep/.van-tab__text {
  display: block;
  overflow: auto;
  -webkit-line-clamp: none;
}
/deep/.van-tabs__nav {
  background-color: #6765650d;
}
/deep/.vanTabs {
  margin-top: 0.1rem;
  p {
    margin: 0;
  }
  /deep/.van-tabs__wrap {
    border-radius: 0.05rem;
    margin-bottom: 0.1rem;
    height: 0.5rem;
  }
  /deep/.van-tabs__content {
    border-radius: 0.05rem;
  }
  /deep/.van-tab__text {
    display: block;
    overflow: auto;
    background-color: #676565;
    -webkit-line-clamp: none;
    .supTitle {
      font-size: 0.14rem;
      margin-bottom: 0.05rem;
      text-overflow: unset;
    }
    p {
      display: block;
      margin: 0;
      color: #ccc;
      text-align: center;
    }
  }
  /deep/.van-tab--active {
    .supTitle {
      font-weight: 600;
      color: black;
    }
  }
  .tabMain {
    font-size: 0.12rem;
    padding: 0.16rem;
    background-color: #fff;
    border-radius: 0.05rem;
    .tabMain_title {
      font-size: 12px;
      color: #ccc;
    }
    .tabMain_tips {
      font-size: 12px;
      color: #ccc;
      span {
        font-weight: 500;
        color: black;
        padding-left: 0.02rem;
      }
    }
    p {
      margin: 0;
    }
    .inputBox {
      /deep/input {
        font-size: 0.25rem;
        font-weight: 700;
      }
    }
    /deep/.van-hairline--top-bottom::after {
      border: none;
    }
    .inputMoney {
      padding-left: 0;
    }
  }
  .list {
    margin-top: 0.1rem;
    .listBox {
      margin-top: 0;
      border-radius: initial;
      p {
        margin: 0;
      }
      /deep/.van-cell__title {
        font-weight: 700;
        line-height: normal;
      }
      .subtitle {
        margin-top: 0.02rem;
        color: #ccc;
        font-size: 12px;
      }
      .rightTis {
        font-weight: 600;
        color: black;
      }
    }
  }
  .rowBox {
    margin-top: 0.2rem;
  }
  .colBtn {
    text-align: center;
    border-right: 1px #ccc solid;
    color: #175ceb;
    font-size: 0.12rem;
    position: relative;
    img {
      position: absolute;
      top: -70%;
      right: 20%;
      width: 0.3rem;
    }
  }
  .lastColbtn {
    border-right: none;
  }
  .leftTab {
    height: 0.5rem;
  }
  .rightTab {
    height: 0.5rem;
  }
}
.rowBox {
  margin-top: 0.05rem;
}

.colBtn {
  text-align: center;
  color: #175ceb;
  font-size: 0.12rem;
  position: relative;
  img {
    position: absolute;
    top: -70%;
    right: 20%;
    width: 0.3rem;
  }
}
.firstBtn {
  text-align: left;
  text-indent: 0.1rem;
  color: #676565;
  font-size: 12px;
}
.secondBtn {
  color: black;
}
.lastColbtn {
  text-align: right;
  padding-right: 0.1rem !important;
  color: orange;
  font-size: 12px;
}
.datePicker {
  margin-top: 0.2rem;
}
</style>
